@import "../varibles";
@import "../mixins/mixin";

.vue-switch{
	@include inline-block;
	position: relative;

	.vue-switch-inner{
		position: relative;
		width:$switch-width;
		height:$switch-height;
		line-height:$switch-line-height;
		border:$switch-border;
		border-radius:$switch-border-radius;
		background-color: $switch-background;
		@include transition(all 0.3s ease-in);
		&:after{
			content:"";
			position: absolute;
			width: 18px;
		    height: 18px;
		    left: 2px;
		    top: 1px;
		    border-radius: 100%;
		    background-color: #fff;
		    @include transition(left 0.3s ease-in);
		}

	}

	.vue-switch-btn{
		position: absolute;
		left:22px;
	}

	&.vue-switch-checked .vue-switch-inner{
		border:$switch-border-checked;
		background-color:$switch-checked-background;
		color:$switch-checked-color;
	
		&:after{
			left:22px;
		}
		
	}


	&.vue-switch-checked .vue-switch-btn{
		left:6px;
	}
}